/*
	节点面板关系连线
*/
define(
	[
		'require',
		'./arrow',
		'./component',
		'./menus'
	],
	function (require) {
		"use strict";

		var Arrow = require('./arrow');
		var Component = require('./component');
		var Menus = require('./menus');

		//节点面板关系连线
		var RelationLine = Component.extend({
			render: function(){
				var me = this;
				var g = this.group;
				var linePos = this._computedLinePos(this.fromPanel, this.toPanel);
				g.addChild(new Arrow({
					hoverable: true,
					style: {
						color: 'rgb(106,197,254)',
						strokeColor: 'rgb(106,197,254)',
						xStart: linePos.xStart,
						yStart: linePos.yStart,
						xEnd: linePos.xEnd,
						yEnd: linePos.yEnd,
						lineWidth: 4
					},
					highlightStyle: {
						strokeColor: 'rgb(106,197,254)',
						lineWidth: 5
					}
				}));

				this.linePos = linePos;

				this._renderMenus();

				this._addEventListner();
			},

			_addEventListner: function(){
				var me = this,
					g = this.group,
					runBind = Ember.run.bind;

				g.bind("mouseover", runBind(this, "_mouseover"));
				g.bind("mouseout", runBind(this, "_mouseout"));
			},

			_computedLinePos: function(fPanel, tPanel){
				var fPanelX = fPanel.x,
					fPanelY = fPanel.y,
					fPanelX1 = fPanel.x + fPanel.width,
					fPanelY1 = fPanel.y + fPanel.height,
					fCenterX = fPanel.x + (fPanel.width/2),
					fCenterY = fPanel.y + (fPanel.height/2),
					//fpanel两条对角线的斜率
					fk1 = (fPanelY-fPanelY1)/(fPanelX-fPanelX1),
					fk2 = -fk1;

				var tPanelX = tPanel.x,
					tPanelY = tPanel.y,
					tPanelX1 = tPanel.x + tPanel.width,
					tPanelY1 = tPanel.y + tPanel.height,
					tCenterX = tPanel.x + (tPanel.width/2),
					tCenterY = tPanel.y + (tPanel.height/2),
					//tpanel两条对角线的斜率
					tk1 = (tPanelY-tPanelY1)/(tPanelX-tPanelX1),
					tk2 = -tk1;

				var xStart, yStart, xEnd, yEnd;


				//k为两矩形中心点连线的斜率
				var k = (fCenterY-tCenterY)/(fCenterX-tCenterX),
					y;

				if(k == Infinity){
					//箭头垂直向上
					xStart = fCenterX;
					yStart = fPanelY;
					xEnd = tCenterX;
					yEnd = tPanelY1;
				}else if(k == -Infinity){
					//箭头垂直向下
					xStart = fCenterX;
					yStart = fPanelY1;
					xEnd = tCenterX;
					yEnd = tPanelY;
				}else{
					//计算连线起点，也就是两个中心连线与fpanel边框交点
					if(k > fk2 && k < fk1){
						//交点在左右边
						xStart = fCenterX > tCenterX ? fPanelX : fPanelX1;
						yStart = k*(xStart-tCenterX)+tCenterY;
					}else{
						//交点在上下边
						yStart = fCenterY > tCenterY ? fPanelY : fPanelY1;
						xStart = (yStart-tCenterY)/k + tCenterX;
					}

					//计算连线起点，也就是计算两个中心连线与tpanel边框交点
					if(k > tk2 && k < tk1){
						//交点在左右边
						xEnd = fCenterX < tCenterX ? tPanelX : tPanelX1;
						yEnd = k*(xEnd-tCenterX)+tCenterY;
					}else{
						//交点在上下边
						yEnd = fCenterY < tCenterY ? tPanelY : tPanelY1;
						xEnd = (yEnd-tCenterY)/k + tCenterX;
					}
				}
				return {
					xStart: xStart,
					yStart: yStart,
					xEnd: xEnd,
					yEnd: yEnd
				};
			},

			_renderMenus: function(){
				var me = this;
				var menusConfig = Ember.A(this.menusConfig);
				menusConfig = menusConfig.filter(function(config){
					return (config.accessBy.indexOf("9") != -1);
				});

				if(Ember.A(menusConfig).length == 0){
					return;
				}

				this.menus = Menus.create({
					auth: me.get("auth"),
					container: this.container.container.children[0],
					defaultBtn: {
						name: "删除",
						cls: "icon-remove",
						code: "DELETE_RELATION"
					},
					menusConfig: menusConfig,
					scaling: this.container.scaling,
					onItemClick: function(e, menuCode){
						me.onMenuClick && me.onMenuClick(menuCode);
						me.trigger("menuClick", menuCode);
					},
					onmouseout: function(e){
						me.onmouseout && me.onmouseout(e);
						me.trigger('mouseout', e);
					}
				});
				this.menus.render();
			},

			_mouseover: function(e){
				var g = this.group;

				this.onmouseover && this.onmouseover(e);
				this.trigger('mouseover', e);

				if(this.isHover || !g){
					return;
				}

				this.isHover = true;

				this.onmouseenter && this.onmouseenter(e);
				this.trigger('mouseenter', e);

				this._showMenus(e.event)
			},

			_mouseout: function(e){
				var g = this.group,
					menus = this.menus,
					target = e.event.toElement;

				var isEnterDropDown = menus ? menus.isTargetInMe(target) : false;

				if(!this.isHover || !g || isEnterDropDown){
					return;
				}

				this.isHover = false;

				this.onmouseout && this.onmouseout(e);
				this.trigger('mouseout', e);
			},

			showMenus: function(eve){
				
			},

			_showMenus: function(eve){
				if(this.menus){
					this._refreshMenuPosition(eve);
					this.menus.show();
				}
			},

			hideMenus: function(){
				this.menus && this.menus.hide();
			},

			_refreshMenuPosition: function(eve){
				var menus = this.menus;
				var pos = this.container[this.groupName].position,
					layerPos = this.container.getLayerPos(),
					scaling = this.container.getScaling(),
					linePos = this.linePos;

				//var x = layerPos[0] + (pos[0] + (linePos.xStart+linePos.xEnd)/2 - 18)*scaling;
				var x = eve.clientX-150;
				var	y = layerPos[1] + (pos[1] + (linePos.yStart+linePos.yEnd)/2 - 5)*scaling;

				menus.position(x, y);
			},

			destroy: function(){
				var g = this.group;
				g.unbind("mouseover");
				g.unbind("mouseout");

				if(this.menus){
					this.menus.destroy();
					this.menus = null;
				}
				this._super();
			}
		});

		return RelationLine;
	}
);